<template>
  <div>
    <el-dialog title="提示" :visible.sync="dialogVisible" width="30%">
      <span>确认要删除该条数据吗?</span>
      <span slot="footer" class="dialog-footer">
            <el-button @click="dialogVisible = false">取 消</el-button>
            <el-button type="primary" @click="handleClose">确 定</el-button>
        </span>
    </el-dialog>
    <el-dialog title="提示" :visible.sync="createVisible" width="30%">

      <el-form ref="ruleForm" :rules="rules" :model="form" label-width="80px">
        <el-row :gutter="10">
          <el-col :span="24">
            <el-form-item label="账号" size="mini" prop="no">
              <el-input v-model="form.no" name="no">
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="账号类型" size="mini" prop="bindType">
              <el-select size="small" style="width: 100%;" v-model="form.bindType" filterable clearable
                         placeholder="请选择">
                <el-option v-for="item in bindTypeOptions" :key="item.id" :label="item.name"
                           :value="item.id">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <span slot="footer" class="dialog-footer">
            <el-button @click="createVisible = false">取 消</el-button>
            <el-button type="primary" @click="submitForm">确 定</el-button>
        </span>
    </el-dialog>
    <div class="data-content1">
      <div class="tool-add">
        <el-button type="primary" size="small" @click="addView">新增</el-button>
      </div>

      <el-table v-loading="loading" :data="tableData.list" @cell-click="showView" @sort-change="changeTableSort"
                style="width: 100%;font-size: 12px;">
        <el-table-column label="账号" prop="no" width="100">
        </el-table-column>
        <el-table-column label="账号类型" prop="bindTypeName" width="100">
        </el-table-column>
        <el-table-column label="登录次数" prop="loginSize" width="100">
        </el-table-column>
        <el-table-column label="创建时间" prop="addDate">
        </el-table-column>
        <el-table-column width="100" align="center" fixed="right" label="操作">
          <template slot-scope="scope">
            <el-button type="danger" size="mini" style="cursor: pointer;" @click="deleteData(scope.row)">删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>

      <div class="page">
        <el-pagination background :current-page="searchObject.no" :page-sizes="[10, 20, 50, 100]"
                       :page-size="tableData.size" :pager-count="5" layout="total, sizes, prev, pager, next, jumper"
                       :page-count="tableData.totalPage" :total="tableData.total" @size-change="sizeChange"
                       @current-change="pageChange">
        </el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "view_account",
  data() {
    return {
      searchObject: {
        no: 1,
        size: 10,
        school: '',
        name: '',
        phone: '',
        classInfo: '',
        user: ''
      },
      dialogVisible: false,
      createVisible: false,
      defaultProps: {
        children: 'children',
        label: 'name'
      },
      loading: false,
      tableData: {},
      form: { no: "", bindType: "" },
      bindTypeOptions: [{ id: "phone", name: "手机号" },
        { id: "email", name: "邮箱" },
        { id: "account", name: "账号" },
        { id: "other", name: "其他" }],
      rules: {
        no: [
          { required: true, message: '请输入账号', trigger: 'blur' }
        ],
        bindType: [
          { required: true, message: '请选择账号类型', trigger: 'blur' }
        ]
      }
    }
  },
  mounted() {
    
  },
  methods: {
    name() {
      
    }
  },
}
</script>

<style scoped>

</style>
